<template>
  <el-container style="height: 83vh;">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">商家申请管理</span>
          <search-condition :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
        </div>
      </div>
    </el-header>

    <el-main class="sa-p-0" v-loading="table.loading">
      <el-table class="sa-table" height="100%" :data="table.data" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column sortable="custom" prop="id" label="ID" min-width="80" />
        <el-table-column label="申请姓名" prop="name" min-width="120" align="center" />
        <el-table-column label="联系手机号" prop="mobile" min-width="120" align="center" />
        <el-table-column label="会员类型" width="200" prop="level_text" align="center"></el-table-column>
        <el-table-column label="缴费金额" width="200" prop="money" align="center"></el-table-column>
        <el-table-column label="到期日期" width="200" prop="end_time" align="center"></el-table-column>
        <el-table-column label="到期状态" width="200" prop="inviter_name" align="center"></el-table-column>
        <el-table-column label="审核状态" width="200" align="center">
          <template #default="scope">
            <div :class="{ 'success': scope.row.status == 1, 'fail': scope.row.status == 2, 'ing': scope.row.status == 0 }">
              {{ calcStatus(scope.row) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="驳回理由" width="200" prop="remark" align="center"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button
              v-if="scope.row.status==0"
                  class="is-link"
                  type="primary"
                  @click="audit(scope.row)"
              >审核
              </el-button>
            </template>
          </el-table-column> -->
      </el-table>
    </el-main>
    <sa-view-bar style="margin-top: 20px;">
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>

<script>
export default {
  name: 'user.admin.device',
};
</script>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { api } from '../merchant.service';
import { usePagination, useModal } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';
import { useRoute } from "vue-router";
import _ from "lodash"

const props = defineProps({
  serve: {
    type: Number,
    default: 1,
  }
})

const route = useRoute();
const emit = defineEmits(['modalCallBack']);

const filterParams = reactive({
  tools: {
    user: {
      type: 'tinputprepend',
      placeholder: '请输入查询内容',
      field: 'user',
      user: {
        field: 'nickname',
        value: '',
      },
      options: [
        {
          label: '用户昵称',
          value: 'nickname',
        },
        {
          label: '申请人姓名',
          value: 'name',
        },
        {
          label: '手机号',
          value: 'mobile',
        },
      ],
    },

    audit: {
      type: 'tselect',
      label: '审核状态',
      field: 'audit',
      value: '',
      options: {
        data: [
          {
            label: '待审核',
            value: '0',
          },
          {
            label: '审核通过',
            value: '1',
          },
          {
            label: '审核驳回',
            value: '2',
          },
        ],
      },
    },
    create_time: {
      type: 'tdatetimerange',
      label: '申请时间',
      field: 'create_time',
      value: route.query.create_time || [],
      create_time: route.query.create_time || [],
    },
  },
  data: {
    audit: 'all',
    type: '0',
    user: { field: 'nickname', value: '' },
    create_time: route.query.create_time || [],
  },
  conditionLabel: {},
});

const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

const table = reactive({
  loading: false,
  data: [],
});

const { pageData } = usePagination();

const calcStatus = (row) => {
  if (row.status === 0) return '待审核';
  if (row.status === 1) return '已审核';
  if (row.status === 2) return '已驳回';
}

async function getData(page) {
  table.loading = true;
  if (page) pageData.page = page;
  let tempSearch = _.cloneDeep(filterParams.data);
  tempSearch.serve = props.serve;
  let search = composeFilter(tempSearch, {
    mobile: 'like',
    create_time: 'range',
    serve: 'like',
  });

  if (!_.isEmpty(search)) {
    if (_.includes(search.search, 'audit')) {
      let str = _.replace(search.search, /audit/, 'status');
      search.search = str;
    }
  }



  const { error, data } = await api.merchant.supply({
    page: pageData.page,
    list_rows: pageData.list_rows,
    // ...search,
  });
  if (error === 0) {
    table.data = data.data;
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
    filterParams.data.status = '';
    filterParams.data.user = { field: 'nickname', value: '' };
    filterParams.data.serve = '';
    filterParams.data.create_time = route.query.create_time || [];

  }
  table.loading = false;
}

//审核
const audit = (data) => {
  useModal(
    detail,
    {
      title: '审核结果',
      id: data.id,
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}

onMounted(() => {
  getData();
});

</script>
<style>
.success {
  color: #67C23A;
}

.fail {
  color: #FA5151;
}

.ing {
  color: #FFC300;
}
</style>